<template>
  <div>
    <vue-office-docx
      v-if="fileType === 'docx'"
      class="vue-office1"
      :src="fileSrc"
      @rendered="handleRendered"
    />
    <!-- <vue-office-pdf v-else-if="fileType === 'pdf'" class="vue-office1" :src="fileSrc"  /> -->
    <div v-else-if="fileType === 'pdf' && docBlocksType == 'dianjin_api'" class="box-height">
      <iframe
        :src="'/pdfJS/web/viewer.html?file=' + fileSrc"
        width="70%"
        height="100%"
        id="myIframe"
      ></iframe>
      <div style="width: 30%; padding: 10px;" class="iframe-height">
        <el-collapse
          v-model="activeName"
          accordion
          v-for="(item, index) in docBlocksList"
          :key="index"
          @change="collapseChange"
        >
          <el-collapse-item :title="item.chunkText" :name="index">
            <div>{{ item.chunkText }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div v-else-if="fileType === 'pdf'&& docBlocksType == 'dianjin_http'" class="box-height">
      <iframe
        :src="`/pdfJS/web/viewer.html?file=${fileSrc}&keyword=${docWord}` "
        width="70%"
        height="100%"
        id="pdf-view-iframe"
      ></iframe>
      <div style="width: 30%; padding: 10px;overflow-y: auto;">
        <el-collapse
          v-model="activeName"
          accordion
          v-for="(item, index) in docBlocksList"
          :key="index"
          @change="RagChange(item)"
        >
          <el-collapse-item :title="item.content" :name="index">
            <div>{{ item.content }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!-- <Preview v-else-if="fileType === 'pdf'" class="vue-office1" :fileSrc="fileSrc"  /> -->

    <!-- <div v-else>不支持的文件类型</div> -->
  </div>
</template>

<script>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
// import Preview from '@/components/Preview/index.vue';
import "@vue-office/docx/lib/index.css"; // 引入样式
import { getFileUrl, getDocumentChunk, getClientType } from "@/api/knowledge/file";

export default {
  name: "fileView",
  // components: { VueOfficeDocx, Preview },
  components: { VueOfficeDocx, VueOfficePdf },
  data() {
    return {
      fileType: "",
      fileSrc: "",
      // toc: [], // 目录
      params: {
        baseFileId: "",
        baseId: "",
        fileName: "",
      },
      activeName: '',
      docBlocksList: [],
      docBlocksType:'',
      docWord:''
    };
  },
  created() {
    this.params.baseFileId = this.$route.params.baseFileId;
    this.params.baseId = this.$route.params.baseId;
    this.params.fileName = this.$route.params.fileName;
    this.fileType = this.$route.params.fileName.split(".").pop();
    // 获取文件类型和 URL
    this.fetchFileDetails(this.params);
    this.fetchClientType();
    this.documentChunk(this.$route.params);
  },
  methods: {
    fetchFileDetails(params) {
      // 获取文件类型和 URL
      getFileUrl(params).then((response) => {
        if(response?.code === 200) {
          this.fileSrc = process.env.VUE_APP_BASE_API + response?.data;
        }else{
          this.$modal.msgError(response?.msg)
        }
      });
    },
    fetchClientType() {
      // 获取clientType
      getClientType().then((response) => {
        if(response?.code === 200) {
          this.docBlocksType = response?.data?.clientType;
        }else{
          this.$modal.msgError(response?.msg)
        }
      });
    },
    documentChunk(data) {
      const form = {
        kbId: data?.ragParentCategoryId,
        fileId: data?.ragCategoryId,
        content: "",
      };
      getDocumentChunk(form)
        .then((response) => {
          if (response.data?.records) {
            // 点金数据
            this.docBlocksList = response.data.records;
            // this.docBlocksType = 'DJ'
          }else{
            // RAG+数据
            this.docBlocksList = response.data.chunk;
            // this.docBlocksType = 'RAG'
          }
        })
        .catch((error) => {
          this.$modal.msgError("失败");
        });
    },
    block(value) {
      let blockLevel = []
      this.docBlocksList[value].pos.map((item)=>{
        // this.item.axisArray
        blockLevel.push({
          page_no: item.page + 1,
          left_top: {
            x: item.axisArray[0],
            y: item.axisArray[1]
          },
          right_bottom: {
            x: item.axisArray[2],
            y: item.axisArray[3]
          }
        })
      })
      console.log(blockLevel)
      const pdfFrame = document.getElementById('myIframe').contentWindow
      pdfFrame.PDFViewerApplication.pdfViewer.scrollPageIntoView({
        pageNumber: this.docBlocksList[value].pos[0].page + 1,
        content_pos: blockLevel
      })
    },
    RagChange(val){
      // console.log(val)
      // this.docWord = val.content.replace(/\s/g, "")
      this.docWord = val.content
    },
    collapseChange(value){
      this.block(value)

      this.activeName = value
    },
    handleRendered() {},
    renderedHandler() {},
    errorHandler(err) {},
  },
};
</script>
<style scoped lang="scss">
.vue-office1 {
  height: calc(100vh - 84px);
}
.box-height {
  height: 100vh;
  display: flex;
}
::v-deep .el-collapse-item__header {
  // white-space: nowrap; /* 防止文本换行 */
  // overflow: hidden; /* 隐藏溢出的内容 */
  // text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}
.iframe-height{
  height: 100%;
  overflow-y:scroll;
}
</style>
